<template>
	<view class='classify' :style='{height:height}'>
		<view class='head'>
			<uni-icon type="back" color='#F64241' size='30' class='icon' @tap='back'></uni-icon>
			<text class='text' @tap='back'>分类</text>
		</view>
		<view class='list' :style='{height:listheight}'>
			<view class='left'>
				<view v-for="(item,index) in left" :key='index' :class="index == leftActive?'leftItemActive leftItem':'leftItem'" @tap="tapHandle(index)">
					<text class='leftText'>{{item}}</text>
				</view>
			</view>
			<view class='right'>
				<scroll-view  scroll-y="true" class="scroll-Y" 
                @scroll="scroll" :scroll-into-view='intoView' scroll-with-animation='true'>
                    <view  class="scroll-item">
						<view class='ad'>
							<image src="../../static/classifyAd.png" mode="" v-for="item in 4" :key='item' class='adImg'></image>
						</view>
						<view v-for='(item,index) in rightList' :key='index' class='rightlist'>
							<text class='title' :id='item.id'>{{item.title}}</text>
							<view v-for='(val,num) in item.data' :key='num' class='rightBook'>
								<view class='bookInfo'>
									<text class='type'>{{val.type}}</text>
									<text class='number'>{{val.number}}本</text>
								</view>
								<image class='bookImg' :src="val.imgPath" mode=""></image>
							</view>
						</view>
					</view>
                </scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { uniIcon } from "@dcloudio/uni-ui";
	export default {
		data() {
			return {
				height:'',
				listheight:'',
				left:['女生','男生'],
				leftActive:0,
				intoView:'',
				rightList:[
					{
						title:'女生',
						id:'nv',
						data:[
							{
								type:'现代言情',number:"120502",imgPath:'../../static/book.png'
							},
							{
								type:'古代言情',number:"53732",imgPath:'../../static/book.png'
							},
							{
								type:'幻想言情',number:"11211",imgPath:'../../static/book.png'
							},
							{
								type:'科幻空间',number:"4878",imgPath:'../../static/book.png'
							},
						]
					},
					{
						title:'男生',
						id:'nan',
						data:[
							{
								type:'现代言情',number:"120502",imgPath:'../../static/book.png'
							},
							{
								type:'古代言情',number:"53732",imgPath:'../../static/book.png'
							},
							{
								type:'幻想言情',number:"11211",imgPath:'../../static/book.png'
							},
							{
								type:'科幻空间',number:"4878",imgPath:'../../static/book.png'
							},
							{
								type:'现代言情',number:"120502",imgPath:'../../static/book.png'
							},
							{
								type:'古代言情',number:"53732",imgPath:'../../static/book.png'
							},
							{
								type:'幻想言情',number:"11211",imgPath:'../../static/book.png'
							},
							{
								type:'科幻空间',number:"4878",imgPath:'../../static/book.png'
							}
						]
					}
				]
			};
		},
		components:{
			uniIcon
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success(res) {
					that.height = res.windowHeight  + "px";
					that.listheight = res.windowHeight - 80  + "px";
				}
			})
		},
		methods:{
			tapHandle(index){
				this.leftActive = index;
				if(index == 0){
					this.intoView = 'nv'
				}else{
					this.intoView = 'nan'
				}
			},
			back(){
				uni.navigateBack()
			},
			scroll: function(e) {
				if(e.detail.scrollTop < 170){
					this.leftActive = 0
				}else{
					this.leftActive = 1
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.classify{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		.head{
			width: 100%;
			height: 65px;
			position: fixed;
			top: 0;
			left: 0;
			background:#fff;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			padding-bottom:15px;
			z-index: 99;
			.icon{
				margin: 0 10px;
			}
			.text{
				font-size: 18px;
				color:#F64241;
				display: inline-block;
				height: 30px;
				line-height: 30px;
			}
		}
		.list{
			width: 100%;
			overflow: hidden;
			margin-top: 80px;
			.left{
				width: 20%;
				border-right: 1px solid #f0f0f0;
				height: 90%;		
				float: left;
				box-sizing: border-box;
				.leftItem{
					width: 100%;
					height: 45px;
					text-align: center;
					position: relative;
					.leftText{
						color: #000;
						display: inline-block;
						height: 100%;
						line-height:45px;
						font-size: 18px;
						border-bottom: 1px solid #f0f0f0;
					}
				}
				.leftItemActive:before{
					content: '';
					height: 50%;
					border:1px solid #F64241;
					position: absolute;
					left: 5px;
					top: 12px;
				}
			}
			.right{
				width: 80%;
				height: 100%;
				float: left;
				box-sizing: border-box;
				padding: 0 10px;
				.scroll-Y{
					height: 100%;
					.ad{
						width: 100%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.adImg{
							width: 47%;
							height: 50px;
							margin-top: 10px;
						}
					}
					.rightlist{
						width: 100%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.title{
							display: block;
							width: 100%;
							text-align: center;
							margin: 30px 0 15px 0;
						}
						.rightBook{
							width: 49%;
							height: 80px;
							margin-bottom: 20px;
							background: #f0f0f0;
							border-radius: 5px;
							display: flex;
							align-items: flex-end;
							justify-content: center;
							.bookInfo{
								width: 50%;
								text-align: center;
								height: 100%;
								display: flex;
								flex-direction:column;
								justify-content: center;
								.type{
									font-size: 12px;
								}
								.number{
									font-size: 12px;
								}
							}
							.bookImg{
								width: 50%;
								height: 90%;
							}
						}
					}
				}
			}
		}
	}
</style>
